<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<el-form slot="query" ref="form" :inline="true">
			<el-form-item :label="$t('dxn.card_ables_list.club_id')">
				<el-input
					clearable
					v-input="{ name: 'num' }"
					v-model="form.clubId"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<el-form-item :label="$t('common.agent_number')">
				<el-input
					v-input="{ name: 'num_alp' }"
					clearable
					v-model="form.proxyName"
					maxlength="11"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<el-form-item :label="$t('dxn.card_ables_list.date_time')">
				<el-date-picker
					size="medium"
					v-model="form.createdAt"
					:picker-options="pickerShortcut2"
					format="yyyy-MM-dd HH:mm:ss"
					type="datetimerange"
					range-separator="-"
					:start-placeholder="$t('common.start_date')"
					:end-placeholder="$t('common.end_date')"
					align="right"
					clearable
					value-format="timestamp"
					style="width: 430px"
					:default-time="defaultTime"
				></el-date-picker>
			</el-form-item>
			<el-form-item :label="$t('dxn.card_ables_list.belong_total_agent')">
				<el-input
					v-input="{ name: 'num_alp' }"
					clearable
					v-model="form.topProxyName"
					maxlength="11"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					:disabled="loading"
					:loading="loading"
					size="medium"
					@click="search"
				>
					{{ $t('common.search') }}
				</el-button>
				<el-button
					icon="el-icon-refresh-left"
					:disabled="loading"
					size="medium"
					@click="reset"
				>
					{{ $t('common.reset') }}
				</el-button>
				<el-button
					v-if="hasPermission('90150032')"
					type="warning"
					icon="el-icon-download"
					size="medium"
					:loading="exportloading"
					@click="exportExcel"
				>
					{{ $t('common.export') }}
				</el-button>
				<el-button
					type="success"
					icon="el-icon-sort"
					size="medium"
					@click="openColSettings"
				>
					{{ $t('common.row_set') }}
				</el-button>
			</el-form-item>
		</el-form>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<!-- 序号 -->
				<el-table-column
					type="index"
					:label="`${$t('dxn.game_rule.serial_number')}`"
					width="60"
					align="center"
				/>
				<!-- 俱乐部ID -->
				<el-table-column
					v-if="tableColumnData[$t('dxn.card_ables_list.club_id')]"
					prop="id"
					:label="$t('dxn.card_ables_list.club_id')"
					min-width="120"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.id || '-' }}
					</template>
				</el-table-column>

				<!-- 俱乐部名称 -->
				<el-table-column
					v-if="tableColumnData[$t('dxn.card_ables_list.club_name')]"
					prop="clubName"
					:label="$t('dxn.card_ables_list.club_name')"
					min-width="150"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.clubName || '-' }}
					</template>
				</el-table-column>

				<!-- 俱乐部头像 -->
				<el-table-column
					v-if="
						tableColumnData[$t('dxn.card_ables_list.club_header')]
					"
					prop="iconUrl"
					:label="$t('dxn.card_ables_list.club_header')"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						<el-avatar
							:src="scope.row.iconUrl"
							class="show-avatar"
							fit="fill"
						/>
					</template>
				</el-table-column>

				<!-- 俱乐部介绍 -->
				<el-table-column
					v-if="tableColumnData[$t('dxn.card_ables_list.club_desc')]"
					prop="introduction"
					:label="$t('dxn.card_ables_list.club_desc')"
					min-width="200"
					align="center"
				>
					<template slot-scope="scope">
						<!-- {{ scope.row.introduction || '-' }} -->
						<el-tooltip
							v-if="scope.row.introduction.length > 12"
							class="item"
							effect="dark"
							placement="top"
						>
							<div class="tooltip-content" slot="content">
								{{ scope.row.introduction || '-' }}
							</div>
							<div class="tooltip-trigger">
								{{ scope.row.introduction }}
							</div>
						</el-tooltip>
						<span v-else>
							{{ scope.row.introduction || '-' }}
						</span>
					</template>
				</el-table-column>

				<!-- 俱乐部会员数量 -->
				<el-table-column
					v-if="
						tableColumnData[
							$t('dxn.card_ables_list.club_member_num')
						]
					"
					prop="membership"
					:label="$t('dxn.card_ables_list.club_member_num')"
					min-width="150"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.membership || '-' }}
					</template>
				</el-table-column>

				<!-- 代理账号 -->
				<el-table-column
					v-if="tableColumnData[$t('common.agent_number')]"
					prop="proxyName"
					:label="$t('common.agent_number')"
					min-width="150"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>

				<!-- 所属总代账号 -->
				<el-table-column
					v-if="
						tableColumnData[
							$t('dxn.card_ables_list.belong_total_agent')
						]
					"
					prop="topProxyName"
					:label="$t('dxn.card_ables_list.belong_total_agent')"
					min-width="150"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>

				<!-- 创建时间 -->
				<el-table-column
					v-if="tableColumnData[$t('dxn.card_ables_list.date_time')]"
					prop="createdAt"
					:label="$t('dxn.card_ables_list.date_time')"
					min-width="180"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					align="center"
					label="操作"
					width="130"
					fixed="right"
				>
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubAllianceList',
									query: {
										clubId: scope.row.id
									}
								})
							"
						>
							查看俱乐部联盟
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" @click="clickDel">复原缺省</el-link>
			</div>
			<div
				v-for="(value, columnName) in activityListField"
				:key="columnName"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[columnName]">
					{{ columnName }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
const initDate = () => [
  dayjs()
    .startOf('day')
    .subtract(7, 'day')
    .valueOf(),

  dayjs()
    .endOf('day')
    .valueOf()
]

export default {
  name: routerNames.clubList,
  components: {
    MainContent
  },
  mixins: [list],
  data() {
    return {
      tableHeight: 480,
      otherDependenComponents: [],
      exportloading: false,
      colSettings: {
        visible: false,
        dialogColumnData: {}
      },
      activityListField: {
        [this.$t('dxn.card_ables_list.club_id')]: true, // 俱乐部ID
        [this.$t('dxn.card_ables_list.club_name')]: true, // 俱乐部名称
        [this.$t('dxn.card_ables_list.club_header')]: true, // 俱乐部头像
        [this.$t('dxn.card_ables_list.club_desc')]: true, // 俱乐部介绍
        [this.$t('dxn.card_ables_list.club_member_num')]: true, // 俱乐部会员数量
        [this.$t('common.agent_number')]: true, // 代理账号
        [this.$t('dxn.card_ables_list.belong_total_agent')]: true, // 所属总代账号
        [this.$t('dxn.card_ables_list.date_time')]: true // 创建时间
      },
      form: {
        clubId: '',
        proxyName: '',
        topProxyName: '',
        createdAt: undefined
      }
    }
  },
  watch: {
    $route: function (to, from) {
      if (
        to.path.indexOf(routerNames.clubList) > -1 &&
        this.$route.query.clubId
      ) {
        Object.keys(this.form).forEach((key) => {
          this.form[key] = ''
        })
        this.form.clubId = this.$route.query.clubId
        this.loadData()
      }
    }
  },
  created() {
    // 接收url跳转
    if (this.$route.query.clubId) {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = ''
      })
      this.form.clubId = this.$route.query.clubId
    } else {
      this.form.createdAt = initDate()
    }
    // const queryParams = this.$route?.query
    // if (queryParams) {
    // 	Object.keys(queryParams).forEach((k) => {
    // 		this.form[k] = queryParams[k]
    // 	})
    // 	if (!queryParams.clubId) {
    // 		this.form.createdAt = initDate()
    // 	}
    // }
    this.initIndexDB('clubList', this.activityListField)
  },
  methods: {
    // 复原缺省
    clickDel() {
      this.dialogColumnData = {}
      this.dialogColumnData = {
        [this.$t('dxn.card_ables_list.club_id')]: true, // 俱乐部ID
        [this.$t('dxn.card_ables_list.club_name')]: true, // 俱乐部名称
        [this.$t('dxn.card_ables_list.club_header')]: true, // 俱乐部头像
        [this.$t('dxn.card_ables_list.club_desc')]: true, // 俱乐部介绍
        [this.$t('dxn.card_ables_list.club_member_num')]: true, // 俱乐部会员数量
        [this.$t('common.agent_number')]: true, // 代理账号
        [this.$t('dxn.card_ables_list.belong_total_agent')]: true, // 所属总代账号
        [this.$t('dxn.card_ables_list.date_time')]: true // 创建时间
      }
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      this.updateIndexDB()
    },
    // 打开列设置弹框
    openColSettings() {
      this.getIndexDB(this.activityListField)
      this.colSettings.visible = true
    },
    reset() {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = ''
      })
      this.form.createdAt = initDate()
      this.initList()
    },
    formatDate(dateTime) {
      if (dateTime) {
        return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss')
      }
      return undefined
    },
    formatParams() {
      const [startTimeNum, endTimeNum] = this.form.createdAt || []
      const queryCondition = Object.assign({}, this.form, {
        createdAtBegin: this.formatDate(startTimeNum),
        createdAtEnd: this.formatDate(endTimeNum),
        createdAt: undefined
      })
      Object.keys(queryCondition).forEach((k) => {
        if (queryCondition[k] === '') {
          queryCondition[k] = undefined
        }
      })
      return {
        ...this.pageParams,
        queryCondition
      }
    },

    // 导出
    exportExcel() {
      this.exportloading = true
      const params = this.formatParams()
      this.exportExcelPublic({
        api: 'clubManageExport',
        params
      })
        .catch(() => { })
        .finally(() => {
          this.exportloading = false
        })
    },

    // 处理列表api
    async loadData() {
      this.loading = true
      const params = this.formatParams()
      this.$api
        .clubManagerList(params)
        .then((res) => {
          if (res?.code === 200 && res?.data) {
            const { pageNum, pageSize, record = [], totalRecord } =
              res.data || {}

            this.pageNum = pageNum
            this.ppageSize = pageSize
            this.list = record
            this.total = totalRecord || 0
          }
        })
        .catch(() => { })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .show-avatar {
	img {
		width: 100%;
		height: 100%;
	}
}
.tooltip-content {
	width: 250px;
}
.tooltip-trigger {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
